<template>
  <div class="clockInOut-details">
    <div class="clockInOut-iterm" ref="clockInOutIterm">
      <template v-if="display">
        <!-- <transition name='fade'> -->
        <div class="timeStamp">
          <span class="day">18
            <em>9</em>
          </span>
          <span class="week">星期一</span>
        </div>
        <span class="clockInOut">
          <strong>09:29</strong>打卡时间</span>
        <em class="commuterTime">(上班时间&nbsp;09:30)</em>
        <em class="abnormal">迟到</em>
        <em class="outwork">外勤</em>
        <p class="companyAddress">天瑞99商务大厦</p>
        <p class="locationAddress">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-location"></use>
          </svg>厦门市思明区观音山CDB宜兰路4号
        </p>
        <img class="takephotos" src="http://owtz12sxf.bkt.clouddn.com/office1.jpg" alt="">
        <div class="remarks">
          <em>备注：</em>拜访客户数量要超过10家，按销售列表名单,本月任务必须完成200家.拜访客户数量要超过10家，按销售列表名单,本月任务必须完成200家
        </div>
        <div class="taskLink">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-sale"></use>
          </svg>
          <p class="task">销售客户关联Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, impedit.</p>
          <p class="title">客户：赛百味Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, dolor.</p>
        </div>
        <span class="correct reissue ">申请补卡&nbsp;></span>
        <span class=" correct freshen ">更新打卡&nbsp;></span>
        <!-- </transition> -->
      </template>
      <div class="profile">
        <span>李小峰</span>
        <img src="http://owtz12sxf.bkt.clouddn.com/06.jpg" alt="">
      </div>
      <div class="TabBar" ref="tabBar" @touchstart="dropStart" @touchend="dropEnd" @click="hide">
      </div>
    </div>

    <div class="maps-location" ref="mapPoint">
      <div class="circle">
        <img src="http://owtz12sxf.bkt.clouddn.com/06.jpg" alt="">
      </div>
      <div class="triangle-down"></div>
      <div class="oval"></div>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'clockInOut-details',
    data() {
      return {
        msg: '哨子科技',
        touchStartY: 0,
        touchEndY: 0,
        display: true
      }
    },
    mounted: function () {},
    methods: {
      dropStart: function (event) {
        let s = event.targetTouches[0];
        this.touchStartY = s.pageY;
        console.log(this.touchStartY);
      },
      dropEnd: function (event) {},
      hide: function () {
        this.display = !this.display;
        if (!this.display) {
          this.$refs.clockInOutIterm.style.paddingBottom = "0px";
          this.$refs.mapPoint.style.top = "50%";
        } else {
          this.$refs.clockInOutIterm.style.paddingBottom = "4%";
          this.$refs.mapPoint.style.top = "30%";
        }
      }
    }
  }
</script>

<style>

</style>